<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
				.infodiv{
		 display:none;
		/* border:1px solid #000;
		display:block; */
		 width:700px;
		height:40px; 
		position: absolute;
		}
	.del,.info,.update{
			margin-right:10px;
			color:blue;
			cursor: pointer;
		}
		table{
		/* margin-left:-40px;
		margin-top:20px; */
		border:3px double #000; 
		text-align:center; 
		padding: 0px;
		border-spacing: 0px;
		margin:0 auto;
		
		}
		table tr{
		height:30px;
		font-size:15px;
		}
		table tr td{
		width:132px;
		text-align:center; 
		border-top: 1px solid #000;  
		border-right: 1px solid #000;
		/*  border:1px solid #000;  */
		}
		.border{
			border:1px solid #000;
		}
		.border2{
		border:0px;
		}
		input{
		border:0px;
		text-align:center;
		width:70px;
		background-color:#f0f0f0;
		}
		#ipage{
			color:#4f4f4f;
			width:20px;
			height:20px;
			display:inline-block;
			text-align:center;
			border-radius:2px;
			background-color:#E5E5E5;
			cursor: pointer;
		}
		#apage{
			color:#4f4f4f;
			width:20px;
			height:20px;
			display:inline-block;
			text-align:center;
			border-radius:2px;
			background-color:#EED8AE;
			cursor: pointer;
		}
		#tpage{
			color:#4f4f4f;
			width:40px;
			height:20px;
			display:inline-block;
			text-align:center;
			border-radius:2px;
			background-color:#EED8AE;
			cursor: pointer;
		}
		#dpage{
			color:#4f4f4f;
			width:50px;
			height:20px;
			display:inline-block;
			text-align:center;
			border-radius:2px;
			background-color:#EED8AE;
			cursor: pointer;
		}
		#xx5{
		color:#e30c03;
		}
	</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.1.0.js"></script>
	<script type="text/javascript">
		var id,status,name;
		$(function(){
			/* var orderstatus=$("input[type='hidden']").attr("max");
			alert(orderstatus); */
			$(".page").click(function(){
				var pc=$(this).attr("target");
				//得到条件：
				var id=$("input[type='hidden']").attr("id");
				var name=$("input[type='hidden']").attr("value");
				var orderstatus=$("input[type='hidden']").attr("max");
				var shippingstatus=$("input[type='hidden']").attr("size");
				var status=$("input[type='hidden']").attr("width");
				var moblie=$("input[type='hidden']").attr("height");
				alert(id);
				$.getJSON(
						"../OrdersServlet?method=findAllOrder", {
							pc:pc,
							orderid:id,
							paystatus:status,
							consignne:name,
							mobile:moblie,
							orderstatus:orderstatus,
							shippingstatus:shippingstatus
						},
						function(data) {
							if(data=="0")
								$("#rightdiv").load("findorder.jsp"); 
							});
			});
			/*在div里面显示商品详情：*/
			$("#info").click(function(){
				//创建一个新的页面,传递所有信息给它：得到ID：
				var id=$(this).parent().parent().find("td .xx1").val();
				$.getJSON(
						"../OrdersServlet?method=findOneOrders", {
							orderid:id
						},
						function(data) {
							if(data=="0")
								$("#rightdiv").load("itemInfo.jsp"); 
							});
			});
			/*单击修改时，可以对所有信息进行修改*/
			$(".update").click(function(){
				if(text=="1"){
					$(this).attr("id","0");
					$(this).parent().parent().find("td input[id]").addClass("border");
					xx1=$(this).parent().parent().find("td .xx1").val();
					xx2=$(this).parent().parent().find("td .xx2").val();
					xx3=$(this).parent().parent().find("td #xx3").val();
					xx4=$(this).parent().parent().find("td #xx4").val();
					xx5=$(this).parent().parent().find("td #xx5").val();
					xx6=$(this).parent().parent().find("td #xx6").val();
				}else if(text=="0"&&window.confirm("你确定要修改吗？")){//并且提示框点击了确定
					$(this).attr("id","1");
					$(this).parent().parent().find("td input").addClass("border2");
					var x3=$(this).parent().parent().find("td #xx3").val();
					var x4=$(this).parent().parent().find("td #xx4").val();
					var x5=$(this).parent().parent().find("td #xx5").val();
					var x6=$(this).parent().parent().find("td #xx6").val();
					//调用sevlet的方法：
					$.getJSON(
							"../OrdersServlet?method=updateOrders", {
								consignne:x3,
								goodsamount:x4,
								orderamount:x5,
								paystatus:x6,
								id:xx1
							},
							function(data) {
								if(data=="0")
									$("#rightdiv").load("ordersAll.jsp"); 
								});
				}else{
					$(this).attr("id","1");
					$(this).parent().parent().find("td input").addClass("border2");
					$(this).parent().parent().find("td .xx1").val(xx1);
					$(this).parent().parent().find("td .xx2").val(xx2);
					$(this).parent().parent().find("td #xx3").val(xx3);
					$(this).parent().parent().find("td #xx4").val(xx4);
					$(this).parent().parent().find("td #xx5").val(xx5);
					$(this).parent().parent().find("td #xx6").val(xx6);
				}
			});
			/* 删除条目： */
			$(".del").click(function(){
				if(window.confirm("您真的要删除订单吗？")){
					$(this).parent().parent().css("display","none");
					var idstr=$(this).attr("id");
					  $.ajaxSettings.async=false;  
					$.getJSON(
							"../OrdersServlet?method=deleteorder", {
								orderid:idstr
							},
							function(data) {
								if(data=="0"){}
									//如果成功删除这一行
									/* alert(1); */
									/* $(this).parent().parent().hide(); */
									
								});
				}
				
			});
			
			
		});
	</script>
</head>
<body>
	<div style="width:100%;;">
	<h3 style="margin-left:30px;margin-top:40px;margin-bottom:20px;">查询订单</h3>
	<c:if test="${!empty(pageBean)}">
	<table>
		<tr style="font-weight: bold;background-color:#e5e5e5">
			<td>订单号</td>
			<td>下单时间</td>
			<td>收货人</td>
			<td>联系方式</td>
			<td>总金额</td>
			<td>应付金额</td>
			<td>订单状态</td>
			<td>操作</td>
		</tr>
		<c:forEach items="${pageBean}" var="orderinfo">
			<tr>
				<td><input class="xx1" type="text" value="${orderinfo.orderid}" /></td>
				<td><input class="xx2" type="text" value="${orderinfo.addtime }" /></td>
				<td><input id="xx3" type="text" value="${orderinfo.consignne}" /></td>
				<td><input id="xx7" type="text" value="${orderinfo.mobile}" /></td>
				<td><input id="xx4" type="text" value="${orderinfo.goodsamount}" /></td>
				<td><input id="xx5" type="text" value="${orderinfo.orderamount}" /></td>
				<td><input id="xx6" type="text" value="${orderinfo.paystatus}" /></td>
				<td style="border-right:none;width:160px;"><span class="info"><img src="../img/icon_view.gif" height="20px;"/></span><span class="update" id="1"><img  height="20px;" src="../img/icon_edit.gif"></span><span id="${orderinfo.orderid}" class="del"><img  height="20px;" src="../img/icon_trash.gif"></span></td>
			</tr>
		</c:forEach>
	</table>
	</c:if>
	</div>
	<!-- 页码 -->
	<input type="hidden" id="${info.orderid}" value="${info.consignne}" max="${info.orderstatus}" size="${info.shippingstatus}" width="${info.paystatus}" height="${info.mobile}"/>
	<c:if test="${!empty(pageBean)}">
	
		<!-- 页码 -->
	<div style="width:750px;margin-left:650px; font-size: 15px; margin-top:15px;">
		第&nbsp;${pb.pc}&nbsp;页&nbsp;共&nbsp;${pb.tp}&nbsp;页
		<c:if test="${pb.pc > 1 }">
			 <a target="1" class="page" id="tpage">首页</a>
			<a target="${pb.pc-1}" class="page" id="dpage" >上一页</a>
		</c:if>
		<%-- 计算begin、end --%>
		<c:choose>
			<%-- 如果总页数不足5页，那么把所有的页数都显示出来！ --%>
			<c:when test="${pb.tp <= 5 }">
				<c:set var="begin" value="1" />
				<c:set var="end" value="${pb.tp }" />
			</c:when>
			<c:otherwise>
				<%-- 当总页数>10时，通过公式计算出begin和end --%>
				<c:set var="begin" value="${pb.pc-2 }" />
				<c:set var="end" value="${pb.pc+2 }" />
				<%-- 头溢出 --%>
				<c:if test="${begin < 1 }">
					<c:set var="begin" value="1" />
					<c:set var="end" value="5" />
				</c:if>
				<%-- 尾溢出 --%>
				<c:if test="${end > pb.tp }">
					<c:set var="begin" value="${pb.tp -4 }" />
					<c:set var="end" value="${pb.tp }" />
				</c:if>
			</c:otherwise>
		</c:choose>
		<%-- 循环遍历页码列表 --%>
		<c:forEach var="i" begin="${begin }" end="${end }">
			<c:choose>
				<c:when test="${i eq pb.pc }">
					<!--当前页不要超链接  -->
			<span id="ipage">${i}</span>
		</c:when>
				<c:otherwise>
					<a target="${i}" class="page"><span id="apage">${i}</span></a>
				</c:otherwise>
			</c:choose>

		</c:forEach>


		<!-- 首页共页上一页下页尾页 -->

		<c:if test="${pb.pc < pb.tp }">
			<a target="${pb.pc+1}" class="page" id="dpage">下一页</a>
			<a target="${pb.tp}" class="page" id="tpage">尾页</a>
		</c:if>
		
	</div>
	</c:if>
</body>
</html>